<template>
  <div>
    <div class="home ipc-class">
      <!--头部-->
      <headhtml ref="loginStatus"></headhtml>
      <!--导航栏-->
      <div class="home-nav">
        <div class="nav-block"></div>
        <div class="nav-div hand-class" @click="toPath(0)">个人中心</div>
        <div class="nav-div hand-class" @click="toPath(1)">订单记录</div>
        <div class="nav-div hand-class" @click="toPath(2)">联系代购</div>
        <div class="nav-div hand-class" @click="toPath(3)">限时秒杀</div>
        <div class="nav-div hand-class" @click="toPath(4)">代购活动</div>
      </div>

      <!--国家-->
      <div class="home-country">
        <div class="country-info">
          <p class="country-region">选择地区</p>
          <p class="hand-class country-region" style="text-decoration:underline">查看更多</p>
        </div>
        <div class="country-div">
          <div class="regin-select" v-for="item of hotCountryList">
            <p
              @click="selectCountry(item.countryIndex)" :title="item.countryName" class="hand-class country-select "
              :class="{'contry-select-colo':parseInt(selectIndex)===parseInt(item.countryIndex)}"
            >
              {{item.countryName}}
            </p>
          </div>
        </div>

      </div>

      <!--搜索-->
      <div class="home-search">
        <div class="search-info">
          {{hotCountryList[selectIndex].countryName}}
        </div>
        <div class="search-value">
          <input class="search-input" v-model="searchContent" @keyup.enter="searchGoods" placeholder="请输入代购物品" type="">
        </div>
        <div class="search-btn hand-class">
          <button @click="searchGoods" class="iconfont icon hand-class ">&#xe611;</button>
        </div>


      </div>
      <!--热门商品-->
      <div class="home-hot-commodity">
        <div class="commodity-goods commodity-theme" v-for="item of searchGoodsList">
          <img class="goods-img hand-class"
               :src="item.goodsPic" alt="">
          <div class="goods-info">
            <p class="info-new-price">￥ :{{item.newPrice}}</p>
            <p class="info-old-price">{{item.oldPrice}}</p>
            <p class="info-sales-volume">销量:{{item.SalesVolume}}</p>
            <p class="info-comment-count hand-class">评论:{{item.commentCount}}</p>
          </div>
          <div class="goods-name-info">
            <p class="name-info hand-class">{{item.goodsInfo}}</p>
          </div>
          <div class="gd-info">
            <div class="gd-score">代购评分:{{item.gdScore}}</div>
            <div class="iconfont icon gd-name hand-class">&#xe617;:{{item.businessName}}</div>
          </div>
        </div>
        <div class="goods-page commodity-theme">
          <div class="iconfont icon page-left page-div hand-class" @click="pageAddOrSub(0)">&#xe736;</div>
          <div v-for="item of showPageList" class="page-div hand-class" @click="pageClick(item)"
               :class="{'contry-select-colo':parseInt(showSize)===parseInt(item)}">{{item}}
          </div>
          <div class="iconfont hand-class icon page-right page-div" @click="pageAddOrSub(1)">&#xe735;</div>
          <div class="page-div  ">
            <input type="text" class="page-jump" @keyup.enter="pageClick(jumpPage)" placeholder="输入"
                   v-model="jumpPage"/>
          </div>

          <div class="page-div page-div-go" style="width: 8%;background: #0ef4ff">
            <button class="jump-go hand-class" @click="pageClick(jumpPage)">跳转</button>
          </div>
          <div class="page-div" style="width: 10%;font-size: 15px">共{{allPage}}页</div>
        </div>
      </div>
    </div>
    <icpinfo class="ipc-class"></icpinfo>
  </div>
</template>

<script>
  import icpinfo from "../icp/icpinfo"
  import headhtml from "../headhtml/headhtml"

  /*
    import {mapState, mapMutations} from "vuex"
  */

  export default {

    components: {
      icpinfo,
      headhtml
    },
    name: "home",
    data() {
      return {
        selectIndex: 0, //选中的国家
        /*        localtion: "中国大陆", //默认地址*/
        /*      loginStatus: false,  //登录状态*/
        /*
                info: {},  //用户信息
        */
        hotCountryList: [
          {
            id: "",
            countryName: "中国",
            countryIndex: 0
          },
          {
            id: "",
            countryName: "美国",
            countryIndex: 1
          },
          {
            id: "",
            countryName: "加拿大",
            countryIndex: 2
          },
          {
            id: "",
            countryName: "日本",
            countryIndex: 3
          },
          {
            id: "",
            countryName: "香港",
            countryIndex: 4
          },
          {
            id: "",
            countryName: "台湾",
            countryIndex: 5
          },
          {
            id: "",
            countryName: "英国",
            countryIndex: 6
          },
          {
            id: "",
            countryName: "法国",
            countryIndex: 7
          },
          {
            id: "",
            countryName: "荷兰",
            countryIndex: 8
          },
          {
            id: "",
            countryName: "丹麦",
            countryIndex: 9
          },
          {
            id: "",
            countryName: "挪威",
            countryIndex: 10
          },
          {
            id: "",
            countryName: "瑞典",
            countryIndex: 11
          }, {
            id: "",
            countryName: "意大利",
            countryIndex: 12
          },
          {
            id: "",
            countryName: "芬兰",
            countryIndex: 13
          },
          {
            id: "",
            countryName: "爱尔兰",
            countryIndex: 14
          },
          {
            id: "",
            countryName: "德国",
            countryIndex: 15
          },


        ], //所在地区
        dataList: [],  //商品类型
        searchContent: "", //搜索内容
        searchGoodsList: [
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 0
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 1
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 2
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 3
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 4
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 5
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 6
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 7
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 8
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 9
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 10
          },
          {
            id: "",
            goodsPic: "http://img1.360buyimg.com/n6/jfs/t7582/66/3048380492/71753/acde79b5/59b85824N836bb714.jpg", //图片
            goodsName: "苹果8",
            oldPrice: 6800.0, //原价
            newPrice: 6288, //代购价
            SalesVolume: 3000,//销量
            goodsInfo: "手机/苹果8/黑白红金玫瑰/美国/5G/全网通", //商品信息
            businessName: "美国代购日夜飞",  //商家名称
            gdScore: 4.4,  //代购评分
            businessId: "4489dsadasda",//商家id
            commentCount: 31510, //评论数量
            gdIndex: 11
          },
        ], //搜索商品结果
        allPage: 100,//总共页数
        jumpPage: null,//跳转页数
        showSize: 2,//初始化显示
        showPageList: [1, 2, 3, 4, 5, 6, 7, 8],

      }
    },
    /*    computed: {
          ...mapState({
            userInfo: "userInfo"

          })
        },*/
    methods: {


      toPath(type) {
        // if(this.$refs.loginStatus.loginStatus){
        if (true) {
          /* 0个人中心
           1订单记录
           2联系代购
           3限时秒杀
           4代购活动*/
          switch (type) {
            case 0:
              this.$router.push({path: "/center"})

              break;
            case 1:
              break;
            case 2:
              break;
            case 3:
              break;
            case 4:
              break;
          }
        } else {
          this.$router.push({path: "/login/0"})
        }


      },


      /*   /!**
          * 判断是否存在登录
          * @param str
          *!/
         loginYesOrNo(str) {
           if (str !== "0") {
             str = JSON.parse(str);
             this.info = str;
             this.loginStatus = true;
           }
         },*/
      /**
       * 选择代购地区（国家）
       * @param countryIndex
       */
      selectCountry(index) {
        this.selectIndex = index;
      },
      /**
       * 搜索商品
       */
      searchGoods() {
        console.log("搜索商品函数")
      },
      /**
       * 0左箭头，1右箭头
       * @param type
       */
      pageAddOrSub(type) {

        if (type === 0) {
          if (this.showSize === 1) {
            alert("已是最小页数")
            return
          }
          if (this.showSize - 1 !== 1) {


            this.showPageList = [
              this.showSize - 1,
              this.showSize - 2,
              this.showSize - 3,
              this.showSize - 4,
              this.showSize - 5,
              this.showSize - 6,
              this.showSize - 7,
              this.showSize - 8,
            ]
          }
          this.showSize = this.showSize - 1
        } else {
          if (this.showSize === this.allPage) {
            alert("已是最大页数")
            return
          }
          if (this.showSize + 1 !== 100) {


            this.showPageList = [
              this.showSize + 1,
              this.showSize + 2,
              this.showSize + 3,
              this.showSize + 4,
              this.showSize + 5,
              this.showSize + 6,
              this.showSize + 7,
              this.showSize + 8,
            ]
          }
          this.showSize = this.showSize + 1

        }

      },
      /**
       *  点击页数
       * @param page
       */
      pageClick(page) {

        let numTure = page.toString().replace(/[^\d]/g, "");
        page = parseInt(page)
        if (page !== null && numTure && page >= 1 && page <= this.allPage) {
          this.showSize = page
          this.showPageList = [
            this.showSize + 0,
            this.showSize + 1,
            this.showSize + 2,
            this.showSize + 3,
            this.showSize + 4,
            this.showSize + 5,
            this.showSize + 6,
            this.showSize + 7,
          ]


        } else {

          alert("非法参数")
        }
      },


    },
    mounted() {
      /*
            this.loginYesOrNo(this.userInfo);
      */
    }

  };
</script>

<style scoped>
  .ipc-class {
    float: left;
  }

  .page-div-go {
    width: 25px;
    border: 1px solid red;
  }

  .jump-go {
    line-height: 0px;
    font-size: 15px;
    background: #007aff;
    font-weight: bold;
    color: #007aff;
  }

  .page-jump {
    width: 100%;
    height: 100%;
    text-align: center;
    border: #b6b6b6;
    font-size: 13px;
    font-family: 微软雅黑;
  }

  .page-div {
    float: left;
    border: solid 1px wheat;
    border-radius: 1px;
    font-size: 17px;
    line-height: 35px;
    width: 5%;
    height: 80%;
    margin: 3px 0.8%;

    text-align: center;
  }

  .page-left, .page-right {

  }

  .commodity-theme {
    float: left;
  }

  .goods-page {

    width: 50%;
    height: 40px;
    margin: 1% 24.5%;
    border: solid 2px #ffed3e

  }

  .gd-name {
    color: #68ff00;
    font-weight: bold;
  }

  .gd-score {
    color: red;

  }

  .gd-info > > > div {
    width: 45%;
    text-align: center;
    float: left;
    line-height: 10px;
    font-size: 13px;

  }

  .gd-info {
    width: 100%;
    height: 15px;
  }

  .name-info {
    color: green;
    word-wrap: break-word;
    height: 100%;
    font-size: 13px;
    margin-left: 6%;
    margin-right: 2%;
    text-decoration: underline;
  }

  .goods-name-info {
    width: 100%;
    height: 13%;
  }

  .info-comment-count, .info-sales-volume {
    line-height: 20px;
    font-size: 10px;
    color: blue;
  }

  .info-new-price {
    overflow: hidden;
    font-size: 15px;
    color: red;
    line-height: 20px;
    width: 30%;
    padding: 0;
  }

  .info-old-price {
    font-size: 13px;
    color: gray;
    line-height: 20px;
    text-decoration: line-through

  }

  .goods-info > > > p {
    text-align: center;
    float: left;
    margin: 0 1%;

  }

  .goods-info {

    width: 100%;
    height: 10%;
  }

  .goods-img {
    width: 80%;
    height: 60%;
    margin: 5% 10%;
  }

  .commodity-goods:hover {
    box-shadow: 0px 0px 4px 6px #ff39f2;
  }

  .commodity-goods {
    width: 20%;
    height: 250px;
    border: red solid 1px;
    margin: 1% 2% 1% 2.5%;
    float: left;
  }

  .home-hot-commodity {
    width: 80%;
    height: 930px;
    margin: 0 9%;
    border: solid 3px black;
  }

  .search-btn {
    width: 8%;
    height: 100%;
    text-align: center;

  }

  .search-btn > > > button {
    color: green;
    width: 100%;
    height: 100%;
    font-size: 30px;
    background: transparent;
  }

  .search-info {
    font-size: 23px;
    line-height: 25px;
    color: #f9feff;
    margin-left: 1.2%;
    margin-right: 0%;
    width: 10%;
    float: left;
    text-align: center;
  }

  .search-value {
    width: 80%;
  }

  .search-input {
    font-family: 微软雅黑;
    background-color: transparent;
    width: 100%;
    height: 100%;
    color: white;
    text-align: center;
    font-size: 30px;
    padding: 0;
  }

  .home-search > > > div {
    line-height: 40px;
    float: left;
  }

  .home-search {

    width: 50%;
    height: 40px;
    margin: 2.5% 24%;
    border: solid 1px red;
    background: black;
  }

  .contry-select-colo {
    background: yellow;
  }

  .country-div {
    margin-top: -1%;
    margin-left: 4%;
  }

  .country-info {
    width: 5%;
    position: relative;
    left: 1.5%;
    bottom: -18%;
  }

  .country-info > > > p {

    font-size: 18px;
    text-align: center;
  }

  .regin-select {
    width: 5%;
    height: 25%;
    float: left;
    margin: 0% 4% 0.5% 3%;
    font-size: 20px;
    border: solid 2px black;
    text-align: center;
    font-family: 宋体;
    line-height: 25px;
  }

  .regin-select:hover {
    box-shadow: 0px 0px 4px 6px #ff2a33;

  }

  .country-select {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /*宽根据实际需要写*/
  }

  .home-country {
    width: 101%;
    height: 100px;
    background: #00e8ff;
    border-bottom: 2px solid black;

  }

  body {
    height: 900px;
    background-color: yellow;
  }

  * {
    margin: 0;
    padding: 0;
  }

  .home {
    background: #e4ffe8;
  }

  .home > > > div {
    float: left;
  }

  /*
    .home-head {
      width: 100%;
      height: 60px;
      background-color: #2c3e50;
      color: white;
    }

    .home-head > > > div {
      float: left;
    }

    .head-logo {
      margin-left: 10%;
      width: 150px;
    }

    .head-logo > > > img {
      width: 95%;
      line-height: 60px;
    }

    .head-localtion {
      line-height: 60px;
      margin-left: 1%;
      font-size: 15px;
    }

    .head-web-name {
      font-size: 25px;
      color: #edffac;
      line-height: 60px;
      text-align: center;
      margin: 0 20%;
    }

    .loin-no {
      width: 85px;
      height: 100%;
    }

    .loin-no > > > p {
      float: left;
      margin: 0 10%;
      text-align: center;
      margin-top: 1.5%;
      width: 84px;
      line-height: 19px;
    }

    .loin-yes {
      color: white;
      font-size: 15px;
      line-height: 25px;
    }

    .log-reg {
      border: solid 1px #cacaca;
    }

    .colour {
      color: white;
      text-decoration: none;
    }

    .call-server {
      width: 150px;
      margin: 0 5%;
      margin-top: 5px;
      color: #48ff30;
      line-height: 50px;
    }

    .call-server > > > p {
      float: left;
      font-size: 30px;

    }*/

  .hand-class:hover {
    cursor: pointer;
  }

  .home-nav {
    width: 100%;
    height: 100px;
    background: url("../../../static/img/home-nav.jpg") 100% 0px;;
  }

  .nav-block {
    width: 95%;
    margin: 0.8% 2%;
  }

  .nav-div {
    color: #b6b6b6;
    float: left;
    width: 15%;
    height: 45%;
    border: solid 1.5px #deffe7;
    margin-left: 3%;
    margin-right: 1%;
    margin-top: 1%;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    line-height: 45px;
    border-radius: 8px; /* 边框半径 */
    background: #000000;
    opacity: 0.8;
  }

  .nav-div:hover {
    box-shadow: 0px 0px 4px 6px #ffee8d;
  }


</style>
